<template>
  <el-row :gutter="15" class="">
    <el-form
      ref="elForm"
      :model="dataForm"
      :rules="rules"
      size="small"
      :label-width="labelWidth"
      label-position="right"
    >
      <template>
        <el-col :span="24">
          <el-form-item label="模板编号" prop="templateCode">
            <el-input
              v-model="dataForm.templateCode"
              placeholder="请输入"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :md="24" :lg="12" :xl="12">
          <el-form-item label="跳转方式" prop="wxSkip">
            <el-select
              v-model="dataForm.wxSkip"
              placeholder="请选择"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in wxSkipOptions"
                :key="index"
                :label="item.fullName"
                :value="item.id"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col
          :xs="24"
          :md="24"
          :lg="12"
          :xl="12"
          v-if="dataForm.wxSkip == '1'"
        >
          <el-form-item label="小程序ID" prop="xcxAppId">
            <el-input
              v-model="dataForm.xcxAppId"
              placeholder="请输入"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="0">
            <div class="jsbos-common-title">
              <h2></h2>
            </div>
            <el-table :data="dataForm.fieldList" size="mini">
              <el-table-column
                type="index"
                width="50"
                label="序号"
                :align="'center'"
              />
              <el-table-column prop="thirdField" label="变量">
                <template slot="header">
                  <span class="required-sign">*</span>变量
                </template>
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.thirdField"
                    placeholder="请输入"
                    clearable
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column prop="keywordCode" label="参数">
                <template slot="header">
                  <span class="required-sign">*</span>参数
                </template>
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.keywordCode"
                    placeholder="请选择"
                    clearable
                    :style="{ width: '100%' }"
                  >
                    <el-option
                      v-for="(item, index) in scope.row.keywordList"
                      :key="index"
                      :label="`${item.fullName}(${item.enCode})`"
                      :value="item.enCode"
                      :disabled="item.disabled"
                    ></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="isTitle" label="标题" width="50">
                <template slot-scope="scope">
                  <el-checkbox
                    v-model="scope.row.checked"
                    @change="(val) => handleCheckChange(val, scope.$index)"
                  ></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="50">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    class="jsbos-table-delBtn"
                    @click="delFieldList(scope.$index)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div class="table-actions" @click="addFieldList()">
              <el-button type="text" icon="el-icon-plus">添加</el-button>
            </div>
          </el-form-item>
        </el-col>
      </template>
    </el-form>
  </el-row>
</template>
<script>
export default {
  components: {},
  props: {
    value: {
      default: () => {
        templateCode = "";
        wxSkip = "";
        xcxAppId = "";
        fieldList = [];
      },
    },
    labelWidth: {
      type: String,
      default: "100px",
    },
    keywordList: {
      type: Array,
      default: () => [],
    },
  },
  model: {
    prop: "value",
    event: "update",
  },
  data() {
    return {
      dataForm: this.value,
      rules: {
        templateCode: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
          },
        ],
        wxSkip: [
          {
            required: true,
            message: "请选择",
            trigger: "change",
          },
        ],
        xcxAppId: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
          },
        ],
      },
      // 关键词数组
      templateJson: this.keywordList,
      wxSkipOptions: [
        { fullName: "小程序", id: "1" },
        { fullName: "页面", id: "2" },
      ],
    };
  },
  computed: {},
  watch: {
    keywordList() {
      this.templateJson = this.keywordList;
      this.dataForm.fieldList.map((e) => {
        e.keywordList = this.templateJson;
        e.keywordCode = undefined;
      });
    },
  },
  created() {},
  mounted() {},
  methods: {
    handleCheckChange(val, index) {
      if (val) {
        this.dataForm.fieldList.map((e, i) => {
          if (index !== i && e.checked) {
            e.checked = false;
          }
        });
      }
    },
    fieldExist() {
      let isOk = true;
      for (let i = 0; i < this.dataForm.fieldList.length; i++) {
        const e = this.dataForm.fieldList[i];
        if (!e.thirdField) {
          this.$message({
            message: "变量不能为空",
            type: "error",
            duration: 1000,
          });
          isOk = false;
          break;
        }
        if (!e.keywordCode) {
          this.$message({
            message: "来源参数不能为空",
            type: "error",
            duration: 1000,
          });
          isOk = false;
          break;
        }
      }
      return isOk;
    },
    /**参数add消息内容handle */
    addContent(item) {
      this.dataForm.title += "{" + item.enCode + "}";
      this.dataForm.content += "{" + item.enCode + "}";
    },
    // 表单提交
    submit() {
      let _v = false;
      this.$refs["elForm"].validate((valid) => {
        if (valid && this.fieldExist()) {
          _v = true;
        }
      });
      return _v;
    },
    addFieldList() {
      let item = {
        thirdField: undefined,
        keywordCode: undefined,
        isTitle: undefined,
        checked: false,
        keywordList: this.templateJson,
      };
      this.dataForm.fieldList.push(item);
    },
    delFieldList(index) {
      this.dataForm.fieldList.splice(index, 1);
    },
  },
};
</script>
